<template>
	<div class="addBrand-container">
		<div class="container">
			<HeadLable :title="title" :goback="true" />
			<el-form ref="ruleFormValid" :model="ruleForm" :rules="rules" :inline="true" label-width="180px" class="demo-ruleForm">
				<div style="width: 100%;">
					<el-form-item label="套餐名称:" prop="name" style="width: 40%;">
						<el-input v-model="ruleForm.name" placeholder="请填写套餐名称" maxlength="14" style="width: 100%;" />
					</el-form-item>
					<el-form-item label="套餐分类:" prop="idType" style="width: 40%;">
						<el-select v-model="ruleForm.idType" placeholder="请选择套餐分类" @change="$forceUpdate()" >
							<el-option v-for="(item, index) in setMealList" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</div>
				<div style="width: 100%;">
					<el-form-item label="套餐价格:" prop="price" style="width: 40%;">
						<el-input v-model="ruleForm.price" placeholder="请设置套餐价格" />
					</el-form-item>
				</div>
				<div>
					<el-form-item label="套餐菜品:" required>
						<el-form-item>
							<div class="addDish">
								<span v-if="dishTable.length == 0" class="addBut" @click="openAddDish('new')"> + 添加菜品</span>
								<div v-if="dishTable.length != 0" class="content">
									<div class="addBut" style="margin-bottom: 20px" @click="openAddDish('change')">+ 添加菜品</div>
									<div class="table">
										<el-table :data="dishTable" style="width: 100%">
											<el-table-column prop="name" label="名称" width="180" align="center" />
											<el-table-column prop="price" label="原价" width="180" align="center">
												<template #default="scope">
													{{ (Number(Number(scope.row.price).toFixed(2)) * 100) / 100 }}
												</template>
											</el-table-column>
											<el-table-column prop="address" label="份数" align="center">
												<template #default="scope">
													<el-input-number v-model="scope.row.copies" size="small" :min="1" :max="99" label="描述文字" />
												</template>
											</el-table-column>
											<el-table-column prop="address" label="操作" width="180px;" align="center">
												<template #default="scope">
													<el-button type="text" size="small" class="delBut non" @click="delDishHandle(scope.$index)"> 删除 </el-button>
												</template>
											</el-table-column>
										</el-table>
									</div>
								</div>
							</div>
						</el-form-item>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="套餐图片:" required prop="image">
						<image-upload :prop-image-url="imageUrl" @imageChange="imageChange">
							图片大小不超过2M<br />仅能上传 PNG JPEG JPG类型图片<br />建议上传200*200或300*300尺寸的图片
						</image-upload>
					</el-form-item>
				</div>
				<div class="address">
					<el-form-item label="套餐描述:" style="width: 100%;">
						<el-input v-model="ruleForm.description" type="textarea" :rows="3" maxlength="200" placeholder="套餐描述，最长200字" style="width: 70%" />
					</el-form-item>
				</div>
				<div class="subBox address">
					<el-form-item>
						<el-button @click="() => $router.back()"> 取消 </el-button>
						<el-button type="primary" :class="{ continue: actionType === 'add' }" @click="submitForm(false)"> 保存 </el-button>
						<el-button v-if="actionType == 'add'" type="primary" @click="submitForm(true)"> 保存并继续添加 </el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>

		<el-dialog v-if="dialogVisible" title="添加菜品" class="addDishList" v-model="dialogVisible" width="60%" :before-close="handleClose">
			<el-input v-model="value" class="seachDish" placeholder="请输入菜品名称进行搜索" style="width: 293px; height: 40px" size="small" clearable>
				<i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="seachHandle" />
			</el-input>
			<AddDish v-if="dialogVisible" ref="adddish" :check-list="checkList" :seach-key="seachKey" :dish-list="dishList" @checkList="getCheckList" />
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="addTableList">添 加</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import HeadLable from '/@/components/HeadLable/index.vue';
import { ref } from 'vue';
import ImageUpload from '/@/components/ImgUpload/index.vue';
import AddDish from './components/AddDish.vue';
import { querySetmealById, addSetmeal, editSetmeal } from '/@/api/setMeal';
import { getCategoryList } from '/@/api/dish';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();

let title = ref('添加套餐');
let value = ref('');
let setMealList = ref<any>([]);
let seachKey = ref('');
let dishList = ref([]);
let imageUrl = ref('');
let actionType = ref('');
let dishTable = ref([]);
let dialogVisible = ref(false);
let checkList = ref<any>([]);
let ruleForm = ref({
	name: ref(''),
	categoryId: ref(''),
	price: ref(''),
	code: ref(''),
	image: ref(''),
	description: ref(''),
	dishList,
	status: true,
	idType: ref(''),
});

const rules = {
	name: {
		required: true,
		validator: (rule: any, value: string, callback: Function) => {
			if (!value) {
				callback(new Error('请输入套餐名称'));
			} else {
				const reg = /^([A-Za-z0-9\u4e00-\u9fa5]){2,20}$/;
				if (!reg.test(value)) {
					callback(new Error('套餐名称输入不符，请输入2-20个字符'));
				} else {
					callback();
				}
			}
		},
		trigger: 'blur',
	},
	idType: {
		required: true,
		message: '请选择套餐分类',
		trigger: 'change',
	},
	image: {
		required: true,
		message: '菜品图片不能为空',
	},
	price: {
		required: true,
		// 'message': '请输入套餐价格',
		validator: (rules: any, value: string, callback: Function) => {
			const reg = /^([1-9]\d{0,5}|0)(\.\d{1,2})?$/;
			if (!reg.test(value) || Number(value) <= 0) {
				callback(new Error('套餐价格格式有误，请输入大于零且最多保留两位小数的金额'));
			} else {
				callback();
			}
		},
		trigger: 'blur',
	},
	code: { required: true, message: '请输入商品码', trigger: 'blur' },
};

onMounted(() => {
	getDishTypeList();
	actionType.value = route.query.id ? 'edit' : 'add';
	if (actionType.value == 'edit') {
		init();
		title.value = '编辑菜品';
	}
});

const init = async () => {
	querySetmealById(String(route.query.id)).then((res) => {
		if (res && res.code === 1) {
			ruleForm.value = res.data;
			ruleForm.value.status = res.data.status == '1';
			(ruleForm as any).price = res.data.price;
			// imageUrl = `http://172.17.2.120:8080/common/download?name=${res.data.data.image}`
			imageUrl.value = res.data.image;
			checkList.value = res.data.setmealDishes;
			dishTable.value = res.data.setmealDishes.reverse();
			ruleForm.value.idType = res.data.categoryId;
		} else {
			ElMessage.error(res.msg);
		}
	});
};

const seachHandle = () => {
	seachKey.value = value.value;
};

// 获取套餐分类
const getDishTypeList = () => {
	getCategoryList({ type: 2, page: 1, pageSize: 1000 }).then((res) => {
		if (res && res.code === 1) {
			setMealList.value = res.data
		} else {
			ElMessage.error(res.msg);
		}
	});
};

// 删除套餐菜品
const delDishHandle = (index: any) => {
	dishTable.value.splice(index, 1);
	checkList.value = dishTable.value;
};

// 获取添加菜品数据 - 确定加菜倒序展示
const getCheckList = (value: any) => {
	checkList.value = [...value].reverse();
};

// 添加菜品
const openAddDish = (st: string) => {
	console.log("进来了");
	
	seachKey.value = '';
	dialogVisible.value = true;
};

// 取消添加菜品
const handleClose = () => {
	dialogVisible.value = false;
	checkList = JSON.parse(JSON.stringify(dishTable));
};

// 保存添加菜品列表
const addTableList = () => {
	dishTable.value = JSON.parse(JSON.stringify(checkList.value));
	console.log("dishTable",dishTable.value);
	
	dishTable.value.forEach((n: any) => {
		n.copies = 1;
	});
	dialogVisible.value = false;
};

const ruleFormValid = ref();
const submitForm = (st: any) => {
	ruleFormValid.value.validate((valid: any) => {
		if (valid) {
			if (dishTable.value.length === 0) {
				return ElMessage.error('套餐下菜品不能为空');
			}
			if (!ruleForm.value.image) return ElMessage.error('套餐图片不能为空');
			let prams = { ...ruleForm.value } as any;
			prams.setmealDishes = dishTable.value.map((obj: any) => ({
				copies: obj.copies,
				dishId: obj.dishId,
				name: obj.name,
				price: obj.price,
			}));
			(prams as any).status = actionType.value === 'add' ? 0 : ruleForm.value.status ? 1 : 0;
			prams.categoryId = ruleForm.value.idType;
			// delete prams.dishList
			if (actionType.value == 'add') {
				delete prams.id;
				addSetmeal(prams)
					.then((res) => {
						if (res && res.code === 1) {
							ElMessage.success('套餐添加成功！');
							if (!st) {
								router.push({ path: '/setmeal' });
							} else {
								ruleFormValid.value.resetFields();
								dishList.value = [];
								dishTable.value = [];
								ruleForm.value = {
									name: '',
									categoryId: '',
									price: '',
									code: '',
									image: '',
									description: '',
									dishList: [],
									status: true,
									id: '',
									idType: '',
								} as any;
								imageUrl.value = '';
							}
						} else {
							ElMessage.error(res.msg);
						}
					})
					.catch((err) => {
						ElMessage.error('请求出错了：' + err.message);
					});
			} else {
				delete prams.updateTime;
				editSetmeal(prams)
					.then((res) => {
						if (res.code === 1) {
							ElMessage.success('套餐修改成功！');
							router.push({ path: '/setmeal' });
						} else {
							ElMessage.error(res.msg);
						}
					})
					.catch((err) => {
						ElMessage.error('请求出错了：' + err.message);
					});
			}
		} else {
			// console.log('error submit!!')
			return false;
		}
	});
};

const imageChange = (value: any) => {
	ruleForm.value.image = value;
};
</script>
<style lang="scss" scoped>
@import url("./components/addmeal.scss");
.avatar-uploader .el-icon-plus:after {
	position: absolute;
	display: inline-block;
	content: ' ' !important;
	left: calc(50% - 20px);
	top: calc(50% - 40px);
	width: 40px;
	height: 40px;
	background: url('/@/assets/icons/icon_upload@2x.png') center center no-repeat;
	background-size: 20px;
}
</style>
<style lang="scss" scoped>
.addBrand-container {
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #ffc200;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 200px;
		height: 160px;
		line-height: 160px;
		text-align: center;
	}

	.avatar {
		width: 200px;
		height: 160px;
		display: block;
	}

	.address {
		width: 100%;
	}
	.el-input__prefix {
		top: 2px;
	}

	.addDish {

		.el-input-number__increase {
			border-left: solid 1px #fbe396;
			background: #fffbf0;
		}

		.el-input-number__decrease {
			border-right: solid 1px #fbe396;
			background: #fffbf0;
		}

		input {
			border: 1px solid #fbe396;
		}

		.table {
			border: solid 1px #ebeef5;
			border-radius: 3px;

			th {
				padding: 5px 0;
			}

			td {
				padding: 7px 0;
			}
		}
	}

	.addDishList {
		.seachDish {
			position: absolute;
			top: 12px;
			right: 20px;
		}

		.el-dialog__footer {
			padding-top: 27px;
		}

		.el-dialog__body {
			padding: 0;
			border-bottom: solid 1px #efefef;
		}
		.seachDish {
			.el-input__inner {
				height: 40px;
				line-height: 40px;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
.addBrand {
	&-container {
		.container {
			position: relative;
			z-index: 1;
			background: #fff;
			border-radius: 4px;
			min-height: 500px;
			padding-left: 30px;

			.subBox {
				padding-top: 30px;
				text-align: center;
				border-top: solid 1px #dcdfe6;
			}
			.addDish {
				.addBut {
					background: #ffc200;
					display: inline-block;
					padding: 0px 20px;
					border-radius: 3px;
					line-height: 40px;
					cursor: pointer;
					border-radius: 4px;
					color: #333333;
					font-weight: 500;
				}

				.content {
					background: #fafafb;
					padding: 20px;
					border: solid 1px #d8dde3;
					border-radius: 3px;
				}
			}
		}
	}
}
</style>
